<template>
	<div class="search-action-container">
		<div class="search-block">
			<div class="engine-logo">
				<img style="width: 28px; height: 28px" src="https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/baidu.9627e61f.png" alt="" />
				<div class="sanjiaoxing"></div>
			</div>
			<div class="search-input">
				<input type="text" :value="searchStr" @keyup.enter="search" placeholder="输入关键词搜索 | tabs键切换引擎" />
			</div>
		</div>
		<div class="search-tabs">
			<span>快捷导航</span>
			<div class="icon-list">
				<div class="icon-item">
					<svg
						t="1645086452871"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="1678"
						width="24"
						style="background: #fff; border-radius: 50%; width: 25%"
						height="24"
					>
						<path
							d="M512 73.28A438.72 438.72 0 1 0 950.72 512 438.72 438.72 0 0 0 512 73.28z m-98.56 458.88l-16.8 66.88 23.68-20.8s53.92 61.28 64 76.48 1.44 68.96 1.44 68.96l-92.48-113.12s-29.12 101.12-68.48 124.16a97.6 97.6 0 0 1-80 6.56 342.08 342.08 0 0 0 85.44-89.76 382.88 382.88 0 0 0 39.52-119.36h-115.04s8.8-40.48 24.16-41.6 90.88 0 90.88 0l-1.76-124.8-43.2 2.24a96 96 0 0 1-32 48c-24.16 17.44-38.4 10.88-38.4 10.88s42.72-118.24 55.84-141.28 50.4-25.12 50.4-25.12l-23.04 66.72h147.84c17.6 0 18.56 40.64 18.56 40.64h-90.56v122.56s61.28-2.24 81.12 0 19.68 41.6 19.68 41.6z m329.44 160h-91.52l-65.12 46.24-13.6-46.24h-36.96v-368h208z"
							fill="#49C0FB"
							p-id="1679"
						></path>
						<path d="M602.88 691.68l54.88-41.44h43.04V364.64h-121.12v285.6h11.2l12 41.44z" fill="#49C0FB" p-id="1680"></path>
					</svg>
					<span style="width: 75%">稀土掘金</span>
				</div>
				<div class="icon-item">
					<svg
						t="1645086452871"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="1678"
						width="24"
						style="background: #fff; border-radius: 50%; width: 25%"
						height="24"
					>
						<path
							d="M512 73.28A438.72 438.72 0 1 0 950.72 512 438.72 438.72 0 0 0 512 73.28z m-98.56 458.88l-16.8 66.88 23.68-20.8s53.92 61.28 64 76.48 1.44 68.96 1.44 68.96l-92.48-113.12s-29.12 101.12-68.48 124.16a97.6 97.6 0 0 1-80 6.56 342.08 342.08 0 0 0 85.44-89.76 382.88 382.88 0 0 0 39.52-119.36h-115.04s8.8-40.48 24.16-41.6 90.88 0 90.88 0l-1.76-124.8-43.2 2.24a96 96 0 0 1-32 48c-24.16 17.44-38.4 10.88-38.4 10.88s42.72-118.24 55.84-141.28 50.4-25.12 50.4-25.12l-23.04 66.72h147.84c17.6 0 18.56 40.64 18.56 40.64h-90.56v122.56s61.28-2.24 81.12 0 19.68 41.6 19.68 41.6z m329.44 160h-91.52l-65.12 46.24-13.6-46.24h-36.96v-368h208z"
							fill="#49C0FB"
							p-id="1679"
						></path>
						<path d="M602.88 691.68l54.88-41.44h43.04V364.64h-121.12v285.6h11.2l12 41.44z" fill="#49C0FB" p-id="1680"></path>
					</svg>
					<span style="width: 75%">知乎</span>
				</div>
				<div class="icon-item">
					<svg
						t="1645086482274"
						class="icon"
						viewBox="0 0 1129 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="2219"
						width="24"
						style="background: #fff; border-radius: 50%; width: 25%"
						height="24"
					>
						<path
							d="M234.909 9.656a80.468 80.468 0 0 1 68.398 0 167.374 167.374 0 0 1 41.843 30.578l160.937 140.82h115.07l160.936-140.82a168.983 168.983 0 0 1 41.843-30.578A80.468 80.468 0 0 1 930.96 76.445a80.468 80.468 0 0 1-17.703 53.914 449.818 449.818 0 0 1-35.406 32.187 232.553 232.553 0 0 1-22.531 18.508h100.585a170.593 170.593 0 0 1 118.289 53.109 171.397 171.397 0 0 1 53.914 118.288v462.693a325.897 325.897 0 0 1-4.024 70.007 178.64 178.64 0 0 1-80.468 112.656 173.007 173.007 0 0 1-92.539 25.75h-738.7a341.186 341.186 0 0 1-72.421-4.024A177.835 177.835 0 0 1 28.91 939.065a172.202 172.202 0 0 1-27.36-92.539V388.662a360.498 360.498 0 0 1 0-66.789A177.03 177.03 0 0 1 162.487 178.64h105.414c-16.899-12.07-31.383-26.555-46.672-39.43a80.468 80.468 0 0 1-25.75-65.984 80.468 80.468 0 0 1 39.43-63.57M216.4 321.873a80.468 80.468 0 0 0-63.57 57.937 108.632 108.632 0 0 0 0 30.578v380.615a80.468 80.468 0 0 0 55.523 80.469 106.218 106.218 0 0 0 34.601 5.632h654.208a80.468 80.468 0 0 0 76.444-47.476 112.656 112.656 0 0 0 8.047-53.109v-354.06a135.187 135.187 0 0 0 0-38.625 80.468 80.468 0 0 0-52.304-54.719 129.554 129.554 0 0 0-49.89-7.242H254.22a268.764 268.764 0 0 0-37.82 0z m0 0"
							fill="#20B0E3"
							p-id="2220"
						></path>
						<path
							d="M348.369 447.404a80.468 80.468 0 0 1 55.523 18.507 80.468 80.468 0 0 1 28.164 59.547v80.468a80.468 80.468 0 0 1-16.094 51.5 80.468 80.468 0 0 1-131.968-9.656 104.609 104.609 0 0 1-10.46-54.719v-80.468a80.468 80.468 0 0 1 70.007-67.593z m416.02 0a80.468 80.468 0 0 1 86.102 75.64v80.468a94.148 94.148 0 0 1-12.07 53.11 80.468 80.468 0 0 1-132.773 0 95.757 95.757 0 0 1-12.875-57.133V519.02a80.468 80.468 0 0 1 70.007-70.812z m0 0"
							fill="#20B0E3"
							p-id="2221"
						></path>
					</svg>
					<span style="width: 75%">哔哩哔哩</span>
				</div>
				<div class="icon-item">
					<svg
						t="1645086529597"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="3051"
						width="24"
						style="background: #fff; border-radius: 50%; width: 25%"
						height="24"
					>
						<path
							d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
							p-id="3052"
						></path>
					</svg>
					<span style="width: 75%">GitHub</span>
				</div>
				<div class="icon-item">
					<svg
						t="1645086569357"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="3237"
						width="24"
						height="24"
						style="background: #fff; border-radius: 50%; width: 25%"
					>
						<path
							d="M105.557333 34.60096c-32.768 7.24992-57.166507 29.003093-68.604587 61.351253l-3.90144 11.15136 0 810.103467 4.324693 11.994453c10.175147 28.439893 29.696 47.8208 58.4192 57.99936l11.154773 3.908267 810.100053 0 11.99104-4.328107c28.44672-10.175147 47.827627-29.699413 58.006187-58.4192l3.90144-11.154773L990.948693 107.103573l-3.90144-11.15136c-10.17856-28.7232-29.559467-48.244053-58.006187-58.422613l-11.99104-4.32128L515.485013 32.928427C186.426027 32.78848 112.390827 33.068373 105.557333 34.60096zM446.887253 400.472747c21.74976 5.717333 36.113067 16.868693 44.335787 34.300587 9.485653 19.93728 6.97344 45.73184-6.13376 65.66912-8.506027 13.1072-23.702187 26.494293-54.657707 48.384-6.13376 4.461227-14.639787 11.014827-18.824533 14.91968l-7.666347 6.83008 47.824213 0.14336 47.684267 0-0.27648 24.6784-0.41984 24.818347L314.702507 620.21632l0.41984-4.88448c0.836267-7.386453 5.573973-21.89312 11.014827-32.907947 10.038613-20.91008 29.559467-40.99072 68.32128-70.550187 35.136853-26.91072 45.175467-41.270613 39.318187-56.470187-3.201707-8.64256-13.940053-15.616-23.978667-15.755947-6.137173 0-14.363307 3.068587-18.684587 7.24992-3.485013 3.34848-8.78592 16.03584-8.78592 21.333333 0 1.81248-0.416427 3.628373-0.976213 3.908267-1.532587 0.976213-60.23168-3.908267-61.34784-5.0176-1.672533-1.675947 2.368853-19.380907 6.833493-30.119253 8.64256-20.6336 27.603627-34.297173 53.4016-38.48192C397.943467 395.59168 432.247467 396.704427 446.887253 400.472747zM165.369173 416.228693c2.792107 8.64256 13.666987 43.639467 24.261973 77.663573 10.738347 34.020693 19.6608 61.34784 20.08064 60.648107 0.416427-0.692907 11.291307-35.55328 24.261973-77.663573l23.422293-76.26752 70.413653 0-2.788693 7.253333c-1.532587 4.041387-19.797333 53.541547-40.71424 109.868373l-38.065493 102.48192-37.505707 0.279893-37.645653 0.416427-41.13408-108.895573c-22.586027-59.9552-41.270613-109.595307-41.550507-110.15168-0.27648-0.69632 15.895893-1.256107 35.836587-1.256107L160.494933 400.605867 165.369173 416.228693zM696.050347 424.31488l0 23.702187-114.333013 0 0 33.46432 52.70528 0.27648 52.56192 0.41984 0.41984 22.586027 0.279893 22.729387-52.565333 0.279893-52.708693 0.416427 0 41.8304 58.146133 0.416427 58.14272 0.283307 0.41984 19.797333 0.413013 19.657387 34.024107-51.165867c18.688-28.166827 34.024107-51.869013 34.024107-52.845227s-15.059627-24.818347-33.604267-52.985173c-18.54464-28.30336-33.744213-51.729067-33.744213-52.005547 0-0.279893 17.148587-0.559787 38.06208-0.559787l37.925547 0 18.684587 32.768c10.318507 17.84832 19.24096 32.34816 19.6608 32.068267 0.559787-0.41984 9.0624-15.056213 18.827947-32.764587l17.984853-32.07168 37.36576 0c20.50048 0 37.369173 0.279893 37.369173 0.699733 0 0.416427-15.056213 24.261973-33.467733 52.98176-18.404693 28.57984-33.46432 52.425387-33.46432 52.98176 0 0.41984 16.175787 25.37472 35.976533 55.493973 19.797333 30.119253 36.529493 55.493973 37.08928 56.33024 0.836267 1.396053-7.113387 1.81248-37.789013 1.81248l-38.898347 0-20.773547-34.16064c-11.574613-18.827947-21.333333-34.020693-21.89312-33.7408-0.692907 0.139947-10.315093 15.332693-21.753173 33.7408l-20.6336 33.46432-128.55296 0.41984-128.556373 0.27648 0-220.30336 182.654293 0L696.050347 424.31488 696.050347 424.31488z"
							p-id="3238"
						></path>
					</svg>
					<span style="width: 75%">v2ex</span>
				</div>
				<div class="icon-item">
					<svg
						t="1645086623552"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="3923"
						width="24"
						height="24"
						style="background: #fff; border-radius: 50%; width: 25%"
					>
						<path
							d="M512 954.2656c-251.71968 0-455.79264-204.07296-455.79264-455.79264S260.28032 42.69056 512 42.69056 967.79264 246.76352 967.79264 498.4832 763.71968 954.2656 512 954.2656z m96.32768-243.08736c114.24768 0 206.92992-101.888 206.92992-227.55328 0-125.6448-92.672-227.5328-206.92992-227.5328H470.31296v455.08608h138.01472z m-372.62336 0c91.46368 0 165.60128-71.92576 165.60128-160.6144V256.09216h-55.18336v294.44096c0 59.15648-49.408 107.1104-110.3872 107.1104h-27.58656v53.54496h27.58656-0.03072z m0 0"
							fill="#CB0507"
							p-id="3924"
						></path>
						<path
							d="M608.32768 309.62688h-82.83136V657.6128h82.80064c83.83488 0 151.77728-77.90592 151.77728-173.98784s-67.9424-173.98784-151.77728-173.98784h0.03072z m0 0"
							fill="#CB0507"
							p-id="3925"
						></path>
					</svg>
					<span style="width: 75%">京东</span>
				</div>
				<div class="icon-end">
          <span style="margin-bottom:5px">...</span>
          
        </div>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
	name: 'search-action',
	components: {},
	setup() {
    const state=reactive({
      searchStr: ''
    })
    const search=()=>{
      window.open(`https://www.baidu.com/s?wd=${state.searchStr}`)
    }
    return {
      ...toRefs(state),
      search
    }
  },
});
</script>
<style lang="scss" scoped>
.search-action-container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #1e80ff;
	justify-content: center;
	.search-block {
    position: relative;
		width: 500px;
		height: 40px;
		border-radius: 4px;
		box-sizing: border-box;
		padding: 10px;
		background: #fff;
		display: flex;
		flex-direction: row;
		.engine-logo {
			display: flex;
			flex-direction: row;
			align-items: center;
			.sanjiaoxing {
				width: 0;
				height: 0;
				border-left: 5px solid transparent;
				border-right: 5px solid transparent;
				border-top: 5px solid #86909c;
				margin-left: 3px;
			}
		}
		.search-input {
			margin-left: 5px;
			height: 100%;
			width: 100%;
			input {
				width: 100%;
				padding: 0;
				height: 100%;
				line-height: 24px;
				border: none;
				color: #86909c;
				font-size: 16px;
			}
		}
	}
	.search-tabs {
		margin-top: 10px;
		color: #fff;
		font-size: 16px;
		width: auto;
		height: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		.icon-list {
			margin-left: 20px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			overflow: hidden;
			.icon-item {
        
				width: 100px;
				display: flex;
				flex-direction: row;
				align-items: center;
				background: #3b90ff;
				border-radius: 15px;
				font-size: 8px;
				box-sizing: border-box;
				padding: 4px;
				margin-right: 10px;
				span {
					text-align: center;
				}
        transition: .1s all;
        border: 1px solid none;
			}
      .icon-item:hover{
        border: 1px solid white;
      }
			.icon-end {
				width: 30px;
        height: 30px;
				display: flex;
				flex-direction: row;
				align-items: center;
				background: #3b90ff;
				border-radius: 15px;
				font-size: 8px;
        font-weight: bold;
				box-sizing: border-box;
				padding: 4px;
				margin-right: 10px;
				justify-content: center;
			}
		}
	}
}
</style>
